<template>
  <div>
    <!-- 仅退款 -->
    <!-- <el-descriptions :column="1" border class="mb-2">
      <el-descriptions-item label="商品编码" label-align="center" >
        {{ props.productForm.goodsCode }}
      </el-descriptions-item>
      <el-descriptions-item label="商品名称" label-align="center" >
        {{ props.productForm.goodsTitle }}
      </el-descriptions-item>
      <el-descriptions-item label="商品规格" label-align="center" >
        {{ props.productForm.goodsSpecName }}
      </el-descriptions-item>
      <el-descriptions-item label="眼别" label-align="center" >
        <el-tag type="success">
          {{
            props.productForm.eyeType == 1
              ? "左眼"
              : props.productForm.eyeType == 2
                ? "右眼"
                : "综合"
          }}
        </el-tag>
      </el-descriptions-item>
    </el-descriptions> -->

    <el-form :model="addForm" ref="addFormRef" label-suffix=":" :rules="rules">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="商品编码" label-align="center" :width="80">
          {{ props.productForm.goodsCode }}
        </el-descriptions-item>
        <el-descriptions-item label="商品名称" label-align="center">
          {{ props.productForm.goodsTitle }}
        </el-descriptions-item>
        <el-descriptions-item label="商品规格" label-align="center">
          {{ props.productForm.goodsSpecName }}
        </el-descriptions-item>
        <el-descriptions-item label="眼别" label-align="center">
          <el-tag type="success">
            {{
              props.productForm.eyeType == 1
                ? "左眼"
                : props.productForm.eyeType == 2
                ? "右眼"
                : "综合"
            }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="源订单号(销售单号)" label-align="center">
          {{ addForm.oldOrderCode }}
        </el-descriptions-item>

        <el-descriptions-item label="退款商品总价(元)" label-align="center">
          {{ addForm.totalAmount ? addForm.totalAmount.toFixed(2) : 0 }}
        </el-descriptions-item>

        <el-descriptions-item label="退款类型" label-align="center">
          <el-tag type="primary">仅退款</el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="退款数量" label-align="center">
          <!-- <el-form-item prop="quantity">
            <el-input-number v-model="addForm.quantity" placeholder="请输入退款数量" class="w-full" :min="1"
              :max="addForm.max_num" @input="handleJudge" disabled />
          </el-form-item> -->
          {{ addForm.quantity }}
        </el-descriptions-item>

        <el-descriptions-item label="退款总金额(元)" label-align="center">
          <el-form-item prop="returnAmount">
            <el-input-number
              v-model="addForm.returnAmount"
              placeholder="请输入退款总金额"
              class="w-full"
              :min="0"
              :max="addForm.totalAmount"
              :title="`退款总金额不得超过退货商品总价${addForm.totalAmount}元`"
            />
          </el-form-item>
        </el-descriptions-item>

        <!-- <el-descriptions-item label="退款商品库存编码" label-align="center">
          <el-form-item prop="oldCodes">
            <el-select v-model="addForm.oldCodes" multiple filterable placeholder="请选择退款商品库存编码"
              :multiple-limit="addForm.quantity" >
              <el-option v-for="(item, index) in props.productForm.nowCodes" :key="index" :label="item" :value="item" />
            </el-select>
          </el-form-item>
        </el-descriptions-item> -->

        <el-descriptions-item label="备注" label-align="center">
          <el-form-item prop="remark">
            <el-input
              v-model="addForm.remark"
              type="textarea"
              :rows="1"
              placeholder="请输入备注"
            />
          </el-form-item>
        </el-descriptions-item>
      </el-descriptions>

      <!-- <el-form-item label="退款类型" class="mt-2" prop="returnType">
        <el-radio-group v-model="addForm.returnType" size="large">
          <el-radio-button
            v-for="item in refund_type_list"
            :key="item.id"
            :value="item.id"
          >
            <el-card>
              <img :src="item.src" alt="" class="imgUrl" />
              <div>
                {{ item.name }}
              </div>
            </el-card>
          </el-radio-button>
        </el-radio-group>
      </el-form-item> -->
    </el-form>

    <div class="footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="loading">
        {{ loading ? "提交中..." : "提交" }}
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { returnType } from "./type.js";
import { cloneDeep } from "lodash";
import Decimal from "decimal.js";
// import { createReturnOrder } from "../../api/api.js";
import { handleApiResponse } from "@/utils/request.js";
import { CreateReturnOrder } from "../../../../../../wailsjs/go/api/OrderApi";

onMounted(() => {
  // console.log(props);

  const { id, orderCode, customerId } = props.detailForm;
  const { amount, count, returnQuantity } = props.productForm;
  addForm.value.oldOrderId = id; // 订单id
  addForm.value.oldOrderCode = orderCode; // 源订单号
  addForm.value.customerId = customerId; // 客户id
  addForm.value.totalAmount = amount ? amount / 100 : 0; // 退款商品总价
  // addForm.value.returnAmount = amount ? amount / 100 : 0; // 退款总金额 -->退货退款时填写
  addForm.value.quantity = count - returnQuantity; // 退款数量
  addForm.value.max_num = count - returnQuantity; // 限制退款最大数量
});

const emit = defineEmits(["handleBack"]);
const props = defineProps({
  productForm: {
    type: Object,
    default: {},
  },
  detailForm: {
    type: Object,
    default: {},
  },
});

const addFormRef = ref(null);
const addForm = ref({
  oldOrderId: null, // 订单id
  oldOrderCode: "", // 销售单号
  customerId: null,
  totalAmount: null, // 退款商品总价
  returnAmount: null, // 退款总金额 -->退款退款填写
  quantity: null, // 退款数量
  returnType: 1, // 退款类型
  remark: "",
  oldCodes: [], // 退款商品一物一码
  newOrderItem: {},
});

// 判断数量是否小于编码的长度
const handleJudge = () => {
  if (addForm.value.quantity < addForm.value.oldCodes.length) {
    addForm.value.oldCodes = [];
    ElMessage.warning("请选择退款数量与退款商品编码数量一致");
  }
};

const handleClose = (val = 0) => {
  emit("handleBack", val);
};

const loading = ref(false);
const handleSubmit = () => {
  addFormRef.value.validate((valid) => {
    if (valid) {
      loading.value = true;
      let form = cloneDeep(addForm.value);
      form.newOrderItem = props.productForm;
      form.oldOrderItemId = props.productForm.id;
      form.returnAmount = initPrice(form.returnAmount);
      form.totalAmount = initPrice(form.totalAmount);
      console.log(form);

      handleApiResponse(() => CreateReturnOrder({ item: form })).then((res) => {
        if (res.code == 0) {
          ElMessage.success("操作成功");
          handleClose(1);
          loading.value = false;
        } else {
          loading.value = false;
        }
      });
    }
  });
};

const initPrice = (num) => {
  let price = null;
  if (!num || typeof num != "number") return 0;
  price = new Decimal(num).mul(new Decimal(100)).toString();
  return +price;
};

const rules = ref({
  oldCodes: [
    {
      required: true,
      message: "请选择退款商品编码",
    },
  ],
  returnType: [
    {
      required: true,
      message: "请选择退款类型",
    },
  ],
  remark: [
    {
      required: false,
      message: "请输入备注",
    },
  ],
  returnAmount: [
    {
      required: true,
      message: "请输入退款金额",
    },
  ],
});
</script>

<style scoped lang="scss">
.el-form-item {
  margin-bottom: 0;
}

.returnType {
  @apply w-full flex justify-between;
}

.el-card {
  width: 100%;
  height: 100%;
  @apply flex flex-col justify-center items-center text-center;

  .imgUrl {
    width: 60px;
    height: 60px;
  }
}

:deep(.el-card__body) {
  padding: 5px !important;
}

.footer {
  @apply fixed bottom-2 right-2;
}
</style>